<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<link rel="stylesheet" href="../../static/assets/css/zpui.css"/>
<link rel="stylesheet" href="../../static/assets/css/all.css"/>
<script src="../../static/assets/js/page.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

    <title> 资金报表 </title>
   
</head>
<body>
<div class="page">
    <div class="page-hd">
        <div class="header bor-1px-b">
    <div class="header-left">
        <a href="javascript:history.go(-1)" class="left-arrow"></a>
    </div>
    <div class="header-title">资金报表</div>
    <div class="header-right">
        <a href="#"></a>
    </div>
</div>
    </div>

    <div class="page-bd">
        <!-- 页面内容-->
        <div class="weui-cells card-box" style="background-color: #f65236;">
            <div class="weui-cell weui-cell_access">
                <div class="weui-cell__bd" >
                    <div style="display: flex">
                        <div class="mr30">
                            <div class="selectinput">
                                <input type="text" id="datetime-picker" class="weui-input" value=""/>
                            </div>
                        </div>
                        <div>
                            <div class="selectinput">
                                <input type="text" id="picker" class="weui-input" value="收入"/>
                            </div>
                        </div>
                    </div>
                    <div class="fs32 text-white mt20">
                        ¥<span class="fs54 font_number income">0.00</span>
                    </div>
                    <div class="fs24 text-white totals">合计收入0笔</div>
                </div>
            </div>
        </div>
        <div class="card-box" id="main" style="width: 95%;height: 300px;">
            <!--<img src="../../static/assets/images/img01.png" style="width: 100%">-->
        </div>
        <div class="weui-cells card-box" id="tab1s" style="    overflow: auto">

        </div>

        <span id="span"></span>
    </div>
</div>

<script src="../../static/assets/js/lib/jquery-2.1.4.js"></script>
<script src="../../static/assets/js/jquery-weui.min.js"></script>
    <script src="../../static/js/jquery/jquery.cookie.js"></script>
<script src="../../static/assets/js/lib/fastclick.js"></script>
<script src="../../static/assets/echarts.min.js"></script>
<script src="../../static/mobile/default/js/page.js"></script>
<script src="/static/mobile/default/js/lib/fastclick.js"></script>
<script src="/static/js/jquery/lazyload/jquery.lazyload.js"></script>
<script>
    $(function() {
        FastClick.attach(document.body);
		$("img.lazy").lazyload({effect:"fadeIn",event:"scroll",container:$("#tab1")});
    });
</script>
<script type="text/javascript">
var date = new Date();
    //  $('#datetime-picker').val(date.getFullYear()+"年 0"+(date.getMonth()+1)+"月")
  
    $(function () {
        
       
       echart(1)
       

    

        
        window.addEventListener('resize', function() {
            myChart.resize();
        })
    })
      ;
    function echart(direction,types){
        var array=''
        $.ajax({
            type:'get',
            url:"/api/mp/getBar",
            data:{direction:direction,types:types},
            headers:{ token: $.cookie('code')},
            async:false,
            success:function (res) {
                array = res.data
            }
        })
        
         // 基于准备好的dom，初始化echarts实例
     var  myChart = echarts.init(document.getElementById('main'))
        var option = {
            backgroundColor: '#fff',
            "title": {
                "text": "单位：元",
                x: "center",
                y:"0%",
                textStyle: {
                    color: '#000',
                    fontSize: '14'
                },
                subtextStyle: {
                    color: '#90979c',
                    fontSize: '14',

                },
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                top: '11%',
                right: '3%',
                left: '5%',
                bottom: '12%'
            },
            xAxis: [{
                type: 'category',
                data: array.monthList,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0.12)'
                    }
                },
                axisLabel: {
                    margin: 10,
                    color: '#000',
                    textStyle: {
                        fontSize: 12
                    },
                },
            }],
            yAxis: [{
                name: '',
                axisLabel: {
                    show:false,
                    formatter: '{value}',
                    color: '#e2e9ff',
                },

                axisLine: {
                    show: false,
                    lineStyle: {
                        color: 'rgba(255,255,255,1)'
                    }
                },
                axisTick: {
                    show:false //y轴坐标点消失
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,0.12)'
                    }
                }
            }],
            series: [{
                type: 'bar',
                data: array.amountList,
                barWidth: '14px',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 1,
                            color: 'rgba(0,77,167,1)' // 100% 处的颜色
                        }], false),
                        //barBorderRadius: [30, 30, 30, 30],
                        shadowColor: 'rgba(0,160,221,1)',
                        shadowBlur: 1,
                    }
                },
                label: {
                    normal: {
                        show: true,
                        lineHeight: 30,
                        width: 20,
                        height: 10,
                        position: ['-5', '-30'],
                        distance: 1,
                        color:'rgba(0,77,167,1)',
                        rich: {
                            a: {
                                color: '#fff',
                                align: 'center'
                            }
                        }
                    }
                }
            }]
        };
        
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
</script>
<script>
    let time = $('#datetime-picker').val();
    let where = "收入";
    let html = "";
    let page = 1;
    let times = false;
    var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
    var nScrollTop = 0;   //滚动到的当前位置
    var nDivHight = $("#tab1s").height();
     var nowPage = [],getAgain = [],isLoadend = [];

     $('.page-bd').scroll(function(){
        nDivHight = $("#tab1s").height()   
        nScrollHight = $("#tab1s")[0].scrollHeight;
        nScrollTop = $("#tab1s")[0].scrollTop;
        if( nDivHight-nScrollTop -nScrollHight <20 )
        {
            RequerAjax();
        }
        })
    $(function () {
        RequerAjax();

    })
    
          share()
     function  share(){
    /***用户点击分享到微信圈后加载接口接口*******/
        var url=window.location.href;
        console.log("url:"+url);
            $.ajax({
		    url: "/api/mp/wxconfig",
		    type: "post",
		    data:{shareUrl:url},
		    headers:{ token: $.cookie('code')},
		    dataType: "json",
		    success: function(data){
		         configData = {
                    debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: data.data.appid, // 必填，公众号的唯一标识
                    timestamp: data.data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.data.nonceStr, // 必填，生成签名的随机串
                    signature: data.data.signature,// 必填，签名，见附录1
                    jsApiList : ['hideOptionMenu']
                    // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
               };
               
               //step2:注入配置信息
               wx.config(configData);
               //step3:通过ready接口处理成功验证
               wx.ready(function () {
                   // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
//                 alert("执行ready方法");
//                 wx.checkJsApi({
//                      jsApiList: ['chooseImage'] // 需要检测的JS接口列表，所有JS接口列表见附录2,
//                      success: function(res) {
//                      // 以键值对的形式返回，可用的api值true，不可用为false
//                      // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
//                      }
//                 });
                   //接口1:获取网络类型
                    wx.getNetworkType({
                        success: function (res) {
                          oldNet = res.networkType; // 返回网络类型2g，3g，4g，wifi
//                        alert("网络类型"+ oldNet);
                        }
                     });
                   //禁用右上角菜单按钮
                   wx.hideOptionMenu();
		    })
		    },
		    error: function() {
// 			    _alert('ajax request failed!!!!');
			    return;
		    } 
        })

	    
	    
	    }
    $("#picker").picker({
        title: "请选择",
        cols: [
            {
                textAlign: 'center',
                values: ['收入', '支出', '提现']
            }
        ],
        onClose: function(d){
            html = '';
            where = $('#picker').val();
            let times = true;
            RequerAjax();
        },
    });
    var y = [];
    var m = [];
    var str_y = date.getFullYear(); //选择时间从2018开始
    var end_y = "2100";
    for (let index = str_y; index < Number(end_y) + 1; index++) {
        y.push(index + '年');
    }
    for (let index = 1; index < 13; index++) {
        if (index < 10) index = '0' + index;
        m.push(index + '月');
    }
    $("#datetime-picker").picker({
        title: "请选择时间",
        cols: [
            {
                textAlign: 'center',
                values: y
                //如果你希望显示文案和实际值不同，可以在这里加一个displayValues: [.....]
            },
            {
                textAlign: 'center',
                values: m
            },
        ],
        onClose: function(d){
            html = '';
            time = $('#datetime-picker').val();
            let times = true;
            RequerAjax();
        },
    });
    
     //重新请求数据
        $(document).on('click','.get_list_tip',function () {
                RequerAjax(true);
        })
    function RequerAjax(isagain)
    {
            page = nowPage[where];
            if (typeof(page) == 'undefined') page = 1;
            if (isLoadend[where] == true ) return false;
            if (isagain == true){
                if (getAgain[where] == false) return false;
                getAgain[where] = false;
            }else{
                $('#tab1s').append('<div class="get_list_tip" data-type="'+where+'">加载数据中...</div>');
            }
            isLoadend[where] = true;
         var reg = new RegExp("[年月 ]","g")
          var  timePicker = time.replace(reg, "")
         var logstatus='' 
         var types =''
         let data = {}
          if(where == '提现'){
                    logstatus = -1
                    types = 4
                }else if(where == '收入'){
                    logstatus = 1
                }else if(where == '支出'){
                    logstatus = -1
                }
        if(timePicker ==''){
            data = {
            'direction':logstatus,
            // 'tmonth':timePicker,
            'types':types,
            'page':page,
            'size':10
        };
        }else{
            data = {
            'direction':logstatus,
             'tmonth':timePicker,
            'types':types,
            'page':page,
            'size':10
        };
        }
         
        $.ajax({
            type: "get",
            url: "/api/mp/getAmountReport",
             headers:{ token: $.cookie('code')},
            data: data,
            success: function (res) {
                isLoadend[where] = false;
                if(res.errno !=0){
                    _alert(res.errmsg);
                    getAgain[where] = true;
                    $('#tab1s').find('.get_list_tip').html('加载失败，点击重新加载.');
                    return false
                }
                
                echart(logstatus,types)
                 isLoadend[where] = false;    
                if(where == '提现'){
                    $('.totals').text('合计'+where+''+res.data.total.getCnt+'笔');
                    $('.income').text(res.data.total.getAmount);
                }else if(where == '收入'){
                    $('.totals').text('合计'+where+''+res.data.total.inCnt+'笔');
                    $('.income').text(res.data.total.inAmount);
                }else if(where == '支出'){
                    
                    if(res.data.total.outCnt){
                        $('.totals').text('合计'+where+''+res.data.total.outCnt+'笔');
                    }
                     if(res.data.total.outAmount){
                        $('.income').text(res.data.total.outAmount);
                    }
                    
                }
                $('#span').html('');
                var direction =""
                for(key in res.data.userRecordList.data){
                    if(res.data.userRecordList.data[key].direction== 1){
                        direction = ""
                    }else{
                        direction = "-"
                    }
                    html += "            <div class=\"weui-cell\">\n" +
                        "                <div class=\"weui-cell__bd\">\n" +
                        "                    <div>\n" +
                        "                        <span class=\"fs26 fw600\">"+res.data.userRecordList.data[key].typesStr+"</span>\n" +
                        "                        <!--<span class=\"fs24 text-muted\">(订单号:536985469)</span>-->\n" +
                        "                    </div>\n" +
                        "                    <div class=\"fs24 text-muted\">"+res.data.userRecordList.data[key].ctime+"</div>\n" +
                        "                </div>\n" +
                        "                <div class=\"weui-cell__ft\">\n" +
                        "                    <div class=\"fs28 fw600 font_number text-defaut\">"+direction+res.data.userRecordList.data[key].price+"</div>\n"+" <div class=\"fs28 fw600 font_number text-defaut\">"+res.data.userRecordList.data[key].amount+"</div>\n"+
                        "                </div>\n" +
                        "            </div>"
                }
                
                 length = res.data.userRecordList.data.length;
                if(times == false) {
                    if (length == 0) {
                        html = "<div class=\"empeyOrder\" style=\"width: 100%;text-align: center;\">\n" +
                            "                <img style=\"width: 100%;\" src=\"../../../static/mobile/default/images/emptyData.png\" alt=\"\">\n" +
                            "                <span class=\"fs24 text-muted tc mt30\">暂无记录</span>\n" +
                            "            </div>";
                        $('#span').html(html);
                        $('#tab1s').html('');
                        isLoadend[where] = true;
                        return false;
                    }
                }
                $('#tab1s').html(html);
                if(res.data.userRecordList.totalPages == page){
                    html = "<div class=\"fs24 text-muted tc mt30\">已经到底啦~</div>";
                    $('#span').html(html);
                    isLoadend[where] = true;
                }else{
                    nowPage[where] = page+1;
                }
                
               
               
            },
            error : function() {
                    isLoadend[_type] = false;
                    getAgain[_type] = true;
                    $('#tab1s').find('.get_list_tip').html('加载失败，点击重新加载.');
                }
        })
    }
    function dateTrans(date) {
        let _date = new Date(parseInt(date));
        let y = _date.getFullYear();
        let m = _date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        let d = _date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = _date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let minute = _date.getMinutes();
        let second = _date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute; second = second < 10 ? ('0' + second) : second;
        // console.log( y + '-' + m + '-' + d + ' ' + '　' + h + ':' + minute + ':' + second)
        let dates = m + '月' + d + '日 ' + h + ':' + minute;

        return dates;
    }
</script>
</body>
</html>